<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :row-key="(record) => record._id"
    :pagination="false"
    :loading="loading"
    class="table"
  >
  </a-table>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      dataSource: [],
      columns: [
        {
          dataIndex: '_id',
          key: '_id',
          title: '学院'
        },
        {
          dataIndex: 'studentNum',
          key: 'studentNum',
          title: '新生人数'
        },
        {
          dataIndex: 'reportNum',
          key: 'reportNum',
          title: '已报道人数'
        },
        {
          dataIndex: 'unReport',
          key: 'unReport',
          title: '未报到人数'
        },
        {
          dataIndex: 'progress',
          key: 'progress',
          title: '报道比率'
        }
      ]
    }
  },
  mounted () {
    this.loading = true
    this.$api.report.allCollege().then(res => {
      if (res.code === 0) {
        this.dataSource = res.data.map(item => {
          return Object.assign(item, {
            unReport: item.studentNum - item.reportNum,
            progress: ((item.reportNum / item.studentNum) * 100).toFixed(2)
          })
        }).sort((a, b) => b.progress - a.progress)
      }
    }).catch(err => {
      this.$message.error('请求失败', err)
    }).finally(() => {
      this.loading = false
    })
  }
}
</script>

<style scoped>
  .table {
    height: 63vh;
    overflow-y: scroll;
  }
</style>
